<template>
  <nav class="meun-container">
    <router-link :exact="item.exact" v-for="item in items" :key="item.link" :to="{name: item.name}" active-class="
    selected" exact-active-class=""> 
        <div class="icon">
            <Icon :type="item.icon"/>
        </div>
        <span>{{item.title}}</span>
    </router-link>  
  </nav>
</template>

<script>
import Icon from '@/components/Icon'
export default {
    components:{
        Icon
    },
    data(){
        return {
            items: [
                {
                    name: 'Home',
                    title: '首页',
                    icon: 'home',
                    exact: true
                },
                {
                    name: 'Blog',
                    title: '文章',
                    icon: 'blog',
                    exact: false
                },
                {
                    name: 'About',
                    title: '关于我',
                    icon: 'about',
                    exact: true
                },
                {
                    name: 'Project',
                    title: '项目&效果',
                    icon: 'code',
                    exact: true
                },
                {
                    name: 'Message',
                    title: '留言板',
                    icon: 'chat',
                    exact: true
                }
            ]
        }
    },
    methods: {
        
    }
}
</script>

<style scoped lang="less">
@import '~@/style/var.less';
.meun-container{
    a{
        color: @gray;
        height: 45px;
        padding: 0px 50px;
        text-decoration: none;
        display: flex;
        align-items: center;
        margin: 10px 0;
        transition:all .2s;
       
        .icon{
            color: @gray;
            width: 30px;
        }
        &.selected{
            background: #2d2d2d;
        }
        &:hover{
            color: #fff;
        }
    }
}
</style>